<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        input[type=text]{width:100px;}
    </style>
</head>
<body>
    
    <input type="text" id="txt1">
    <input type="text" id="txt2">
    <input type="text" id="txt3">
    <input type="button" id="btn" value="提交">

    <table border="1" width="400" align="center">
        <thead>
            <tr>
                <th>用户名</th>
                <th>密码</th>
                <th>手机号</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</body>
<script>

    var txt1 = document.querySelector("#txt1");
    var txt2 = document.querySelector("#txt2");
    var txt3 = document.querySelector("#txt3");
    var btn = document.querySelector("#btn");
    var tbody = document.querySelector("tbody");

    btn.onclick = function(){
        // 输入框为空，不允许提交
        // ...
        // 创建元素
        var td1 = document.createElement("td");
        var td2 = document.createElement("td");
        var td3 = document.createElement("td");
        var td4 = document.createElement("td");
        var tr = document.createElement("tr");
        // 设置内容
        td1.innerHTML = txt1.value;
        td2.innerHTML = txt2.value;
        td3.innerHTML = txt3.value;
        td4.innerHTML = '删除'
        // 插入页面
        tr.appendChild(td1);
        tr.appendChild(td2);
        tr.appendChild(td3);
        tr.appendChild(td4);
        tbody.appendChild(tr);
        // 点击删除，删除整行
        td4.onclick = function(){
            tr.remove();
        }
        // 添加完成后，清空输入框
        // ...
    }






    
</script>
</html>